<template>
  <div class="home-title">
    <span class="title-title">{{ title }}</span>
    <slot></slot>
  </div>
</template>
<script setup>
  import { toRefs } from 'vue'
  const props = defineProps({ title: 'string' })
  const { title } = toRefs(props)
</script>
<style lang="scss" scoped>
  .home-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    padding-top: 1%;
    padding-bottom: 1%;
    background: url('/img/title-border.png') no-repeat;
    position: relative;
    background-size: 100% 100%;
    .title-bg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 31px;
      background-size: 100%;
    }
    .title-title {
      font-family: YouSheBiaoTiHei;
      text-shadow: 0px 2px 50px #007eff;
      background: linear-gradient(180deg, #a7d6ff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      margin-left: 15%;
    }
    .title-icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      /* background: url('/img/right-arrow.png') no-repeat; */
      background-size: 100%;
      vertical-align: middle;
    }
  }
</style>
